/*
评论思路：
简单的功能：
需要用到的字段: 用户名、评论内容

评论内容需要存到一个数组中，在读取时，实时渲染

发表评论

1.使用state将评论的内容存起来
2.通过列表渲染将state中存的评论数组通过遍历，将评论渲染（展示）到页面上
3.当添加一条评论时，会增加一条新的评论，并且将此评论和原先存储的评论放到新的评论数组中
4.返回


*/
import React from 'react'
class Appcomment extends React.Component {
  //初始化状态 
  state = {
    comments: [
      //{ id: 1, name: '张三', content: '冒泡！' },
    ],
    //评论人
    userName: '',
    //评论时间
    commentDate: '',
    //评论内容
    userContent: '',
  }
  // 渲染评论列表
  renderList() {
    const { comments } = this.state;
    if (comments.length === 0) {
      return <div className="no-comment">暂无评论，快去评论吧！</div>
    }
    return (
      <ul>
        {comments.map(item => (
          <li key={item.id}>
            <h3>评论人：{item.name}</h3>
            <p>评论时间：{item.dateStr}</p>
            <p>评论内容：{item.content}</p>
          </li>
        ))}
      </ul>
    )
  }

  //对处理表单元素值
  handleForm = (e) => {
    //获取当前DOM对象的name和value
    const { name, value } = e.target;
    //根据name设置对应state
    this.setState({
      [name]: value
    })
  }

  //发表评论
  addComment = () => {
    const { comments, userName, userContent } = this.state

    //非空验证
    if (userName.trim() === '' || userContent.trim() === '') {
      alert("请输入评论人和评论内容")
      return
    }

    //将评论信息添加到state中
    const newComments = [
      {
        id: Math.random(),
        name: userName,
        dateStr: new Date().toLocaleString(),
        content: userContent,
      },
      // es6中 ... 表示展开运算符，其中...comments就是将评论数组里面的内容全部展开
      ...comments
    ]

    //文本框的值 要清空文本只需要将其对应的state清空即可
    this.setState({
      comments: newComments,
      userName: '',
      userContent: '',
      date: '',
    })
  }

 //清空评论
 clearCommemt = () =>{
   const {comments} = this.state
   //验证评论数组是否有内容
   if(comments.length >0){
    alert("确认清空所有的评论吗？")
   }
   //对当前状态的内容进行清空
  this.setState({
    comments: [],
    userName: '',
    userContent: '',
    date: '',
  })
}
//render方法用于在提供的容器参数 container 里渲染一个 React 元素 element。
  render() {
    const { userName, userContent } = this.state;

    return (
      <div className="app" style={{width: "100%", height: "100vh",background:"url('https://cdn.lxip.top/gh/imnxg/imgbeds/featureimages/5.jpg') no-repeat"}}>
        <div style={{width: "500px", height: "500px",position:"relative",left: "50%", transform:"translateX(-50%)"}}>
          <input className="user" type="text" placeholder="请输入评论人" value={userName} name="userName" onChange={this.handleForm} style={{width: "500px", height: "20px",filter:"blur(0.5px)",opacity:"0.9"}}  /><br />
          <textarea className="content" cols="20" rows="10" placeholder="请输入评论内容" value={userContent} name="userContent" onChange={this.handleForm}style={{width: "500px", height: "50px",filter:"blur(0.5px)",opacity:"0.9"}}/> <br />
          <button onClick={this.addComment}>发表评论</button> <button onClick={this.clearCommemt}>清空评论</button>

          {/* 通过条件渲染决定渲染什么内容 */}
          {this.renderList()}
          </div>
      </div>
    )
  }

}

export default Appcomment;
